<!--<template>-->
<!--  <v-chart :width="width" :height="height" :padding="[0]" :data="data" :scale="scale">-->
<!--    <v-tooltip :show-title="false" />-->
<!--    <v-coord type="rect" direction="TL" />-->
<!--    <v-point position="x*y" color="category" shape="cloud" tooltip="value*category" />-->
<!--  </v-chart>-->
<!--</template>-->

<!--<script>-->
<!--import { registerShape } from 'viser-vue'-->
<!--const DataSet = require('@antv/data-set')-->

<!--const imgUrl = 'https://gw.alipayobjects.com/zos/rmsportal/gWyeGLCdFFRavBGIDzWk.png'-->

<!--const scale = [-->
<!--  { dataKey: 'x', nice: false },-->
<!--  { dataKey: 'y', nice: false }-->
<!--]-->

<!--registerShape('point', 'cloud', {-->
<!--  draw (cfg, container) {-->
<!--    return container.addShape('text', {-->
<!--      attrs: {-->
<!--        fillOpacity: cfg.opacity,-->
<!--        fontSize: cfg.origin._origin.size,-->
<!--        rotate: cfg.origin._origin.rotate,-->
<!--        text: cfg.origin._origin.text,-->
<!--        textAlign: 'center',-->
<!--        fontFamily: cfg.origin._origin.font,-->
<!--        fill: cfg.color,-->
<!--        textBaseline: 'Alphabetic',-->
<!--        ...cfg.style,-->
<!--        x: cfg.x,-->
<!--        y: cfg.y-->
<!--      }-->
<!--    })-->
<!--  }-->
<!--})-->

<!--export default {-->
<!--  name: 'TagCloud',-->
<!--  props: {-->
<!--    tagList: {-->
<!--      type: Array,-->
<!--      required: true-->
<!--    },-->
<!--    height: {-->
<!--      type: Number,-->
<!--      default: 400-->
<!--    },-->
<!--    width: {-->
<!--      type: Number,-->
<!--      default: 640-->
<!--    }-->
<!--  },-->
<!--  data () {-->
<!--    return {-->
<!--      data: [],-->
<!--      scale-->
<!--    }-->
<!--  },-->
<!--  watch: {-->
<!--    tagList: function (val) {-->
<!--      if (val.length > 0) {-->
<!--        this.initTagCloud(val)-->
<!--      }-->
<!--    }-->
<!--  },-->
<!--  mounted () {-->
<!--    if (this.tagList.length > 0) {-->
<!--      this.initTagCloud(this.tagList)-->
<!--    }-->
<!--  },-->
<!--  methods: {-->
<!--    initTagCloud (dataSource) {-->
<!--      const { height, width } = this-->

<!--      const dv = new DataSet.View().source(dataSource)-->
<!--      const range = dv.range('value')-->
<!--      const min = range[0]-->
<!--      const max = range[1]-->
<!--      const imageMask = new Image()-->
<!--      imageMask.crossOrigin = ''-->
<!--      imageMask.src = imgUrl-->
<!--      imageMask.onload = () => {-->
<!--        dv.transform({-->
<!--          type: 'tag-cloud',-->
<!--          fields: ['name', 'value'],-->
<!--          size: [width, height],-->
<!--          imageMask,-->
<!--          font: 'Verdana',-->
<!--          padding: 0,-->
<!--          timeInterval: 5000, // max execute time-->
<!--          rotate () {-->
<!--            let random = ~~(Math.random() * 4) % 4-->
<!--            if (random === 2) {-->
<!--              random = 0-->
<!--            }-->
<!--            return random * 90 // 0, 90, 270-->
<!--          },-->
<!--          fontSize (d) {-->
<!--            if (d.value) {-->
<!--              return ((d.value - min) / (max - min)) * (32 - 8) + 8-->
<!--            }-->
<!--            return 0-->
<!--          }-->
<!--        })-->
<!--        this.data = dv.rows-->
<!--      }-->
<!--    }-->
<!--  }-->
<!--}-->
<!--</script>-->
